<style>
  .tips {
    width: 100%;
    text-align: center;
    color: whitesmoke;
    font-size: 24px;
    margin-top: 40px;
  }

  .forgetPsd {
    width: 20%;
    margin: 5px 40%;
  }

  .login .el-form-item__label {
    color: #fff !important;
  }

  .forgetPsdSubmit {
    width: 78%;
    margin-left: 22%;
    background-color: #44cef6;
    color: whitesmoke;
    font-size: 24px;
  }
</style>
<template>
  <div class="login">
    <div class="middle-wrapper">
      <div class="system_top w1200">
        <div v-if="loginStatus != 3" class="text">
          <h3>新华三技术大讲堂</h3>
          <p>Enterprise Data Service Solutions</p>
        </div>
        <div v-if="loginStatus == 3">
          <h3 class="tips">找回密码</h3>
        </div>
        <div v-if="loginStatus == 1" class="login-form">
          <el-form ref="loginForm" :model="form">
            <el-form-item prop="username">
              <el-input v-model.number="form.username" placeholder="请输入手机号" class="el-inputlist" style="height: 60px;">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input :type="passwordType" v-model="form.password" placeholder="请输入登录密码" class="el-inputlist"
                @keyup.enter.native="login(form)" autocomplete="new-password">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-col :offset="3">
                <el-form-item>
                  <el-button class="login-btn" @click="login"></el-button>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>
        </div>

      <!--  <div v-if="loginStatus == 2" class="login-form">
          <el-form ref="loginForm" :model="form">
            <el-form-item prop="username">
              <el-input v-model.number="form.username" placeholder="请输入用户名称" class="el-inputlist" style="height: 60px;">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input :type="passwordType" v-model="form.password" placeholder="请输入登录密码" class="el-inputlist"
                @keyup.enter.native="login(form)" autocomplete="new-password">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-col :offset="3">
                <el-form-item>
                  <el-button class="login-btn" @click="login"></el-button>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>
        </div> -->
      <!-- <div class="codelogin">
          <p v-if="loginStatus == 1">忘记密码</p>
          <p v-if="loginStatus == 1" style="margin-left: 20px;">验证码登录</p>
          <p v-if="loginStatus == 2" style="margin-left: 80px;">密码登录</p>
        </div> -->

     <!--   <div class="forgetPsd" v-if="loginStatus == 3">
          <el-form label-width="80px" :model="formUpdataPassword" :rules="rules" ref="ruleForm">
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="formUpdataPassword.phone"></el-input>
            </el-form-item>
            <el-form-item label="新密码：" prop="newPassword">
              <el-input v-model="formUpdataPassword.newPassword"></el-input>
            </el-form-item>
            <el-form-item label="验证码：" prop="verificationCode">
              <el-input v-model="formUpdataPassword.verificationCode">
                <template @click="toVerificationCode" slot="append">{{verificationCode}}</template>
              </el-input>
            </el-form-item>
            <el-button @click="updataPassword" class="forgetPsdSubmit">确定</el-button>
          </el-form>
        </div> -->

      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios';
  import crypto from 'crypto';
  export default {
    data() {
      // var checkPhone = (rule, value, callback) => {
      //   const phoneReg = /^1[34578]\d{9}$$/
      //   if (!value) {
      //     return callback(new Error('电话号码不能为空'))
      //   }
      //   setTimeout(() => {
      //     // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
      //     // 所以在前面加了一个+实现隐式转换

      //     if (!Number.isInteger(+value)) {
      //       callback(new Error('请输入数字值'))
      //     } else {
      //       if (phoneReg.test(value)) {
      //         callback()
      //       } else {
      //         callback(new Error('电话号码格式不正确'))
      //       }
      //     }
      //   }, 100)
      // }

      return {
        verificationCode: '获取验证码',
        loginStatus: '1', //1为密码登录，2为验证码登录，3为忘记密码
        passwordType: 'password',
        checkCode: '',
        form: {
          username: '',
          password: '',
          yanzhengma: ''
        },
        formUpdataPassword: {
          phone: '',
          newPassword: '',
          verificationCode: ''
        },

      }
      // rules: {
      //   buyerPhone: [{
      //     validator: checkPhone,
      //     trigger: 'blur'
      //   }]
      // }

    },
    methods: {
      updataPassword() {

      },
      toVerificationCode() {
        if (this.formUpdataPassword.phone) {
          this.$ajax({
            url: this.$root.jifuUrl + "/sendSmsV2?phone=" + this.formUpdataPassword.phone + '&type=5&validTime=60',
            success: res => {
              if (res.data.code == 200) {
                console.log('--获取验证码--sendSmsV2-', res.data.data)
              }
            }
          });
        }

      },
      login() {

        //				const md5 = crypto.createHash('md5');
        //		        md5.update(this.form.password);
        //		        let md5password = md5.digest('hex');
        //				this.$ajax({
        //				 	url: this.$root.jifuUrl + "/mns/user/login",
        //				 	headers:{'ContentType': 'application/json; charset=utf-8'},
        //				 	method: 'POST',
        //				 	data: {
        //					 	nickname:this.form.username,
        //					 	password:this.form.password
        //					},
        //				 	success: res=> {
        //				 		if(res.data.code == 200) {
        //				 			this.$root.userInfoMsg = res.data.data;
        //                            this.$store.commit('SET_USERINFOMSG', this.$root.userInfoMsg);
        //							this.$router.push({ path: 'home' });
        //				 		}
        //					}
        //				});
        if(this.form.username == 'admin'){  //用户名密码登陆
          axios({
            method: 'POST',
            url: this.$root.jifuUrl + "/mns/user/login",
            headers: {
              'Content-type': 'application/json; charset=utf-8'
            },
            data: JSON.stringify({
              nickname: this.form.username,
              password: this.form.password
            })
          }).then((res) => {
            this.$root.userInfoMsg = res.data.data;
            this.$store.commit('SET_USERINFOMSG', this.$root.userInfoMsg);
            this.$router.push({
              path: 'home'
            });
          }).catch(error => {
            alert('用户名或密码错误！');
          })
        }else{
          axios({
            method: 'POST',
            url: this.$root.jifuUrl + "/mns/user/loginByPhoneandpassword",
            headers: {
              'Content-type': 'application/json; charset=utf-8'
            },
            data: JSON.stringify({
              phone: this.form.username,
              password: this.form.password
            })
          }).then((res) => {
            this.$root.userInfoMsg = res.data.data;
            this.$store.commit('SET_USERINFOMSG', this.$root.userInfoMsg);
            this.$router.push({
              path: 'home'
            });
          }).catch(error => {
            alert('用户名或密码错误！');
          })

        }

      }
    }
  };
</script>
<style>
  .codelogin {
    display: flex;
    /* width: 120px; */
    height: 30px;
    line-height: 30px;
    /* text-align: center; */
    margin-left: 60%;
    color: whitesmoke !important;
    /* background-color: burlywood; */
  }

  .login {
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background: url(../../assets/qudaoImg/HomeBg.jpg) top center no-repeat;
    background-size: 100% 100%;
  }

  .login .middle-wrapper {
    position: fixed;
    width: 100%;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-60%);
    height: 350px;
    background: rgba(0, 0, 0, 0.5);
  }

  .login .title-wrapper {
    margin-top: 50px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
  }

  .login .system_top {
    height: 400px;
    overflow: hidden;
  }

  .login .system_top .text {
    width: 886px;
    /* height: 80px; */
    background: url(../../assets/qudaoImg/keji.png) 0 0 no-repeat;
    margin: 30px auto 0;
    /* margin-top: 30px; */
  }

  .login .system_top .text h3 {
    height: 50px;
    line-height: 50px;
    font-size: 50px;
    color: #F5F5F5;
    font-weight: normal;
    margin: 0 0 24px 137px;
  }

  .login .system_top .text p {
    height: 43px;
    line-height: 43px;
    font-size: 40px;
    color: #F5F5F5;
    margin: 0 0 38px 137px;
  }

  .login .login-form .el-form,
  .login-form {
    width: 886px;
    height: 80px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
  }

  .login .login-form .el-form-item {
    position: absolute;
    top: 0;
    left: 0;
  }

  .login .login-form .el-form-item:nth-child(2) {
    left: 435px;
  }

  .login .login-form .el-form-item:nth-child(3) {
    left: 820px;
  }

  .login .login-form .el-form-item,
  .login .login-form .el-form-item .el-inputlist,
  .login .login-form .el-form-item__content {
    width: 275px;
    height: 60px !important;
    line-height: 60px;
    display: inline-block;
  }

  .login .login-form .el-form-item .el-inputlist input {
    width: 275px;
    height: 60px !important;
    line-height: 60px;
    display: inline-block;
    font-size: 18px;
  }

  .login-form .el-form-item input[type="text"],
  .login-form .el-form-item input[type="password"] {
    width: 360px !important;
    height: 60px;
    line-height: 60px;
    padding-left: 85px !important;
  }

  .login .el-form-item .el-button {
    padding: 0;
    width: 60px;
    height: 60px;
    display: inline-block;
    border: none;
    cursor: pointer;
    background: url(../../assets/qudaoImg/Go.png) top center no-repeat;
  }

  .login .el-form-item:nth-child(1) input {
    background: url(../../assets/qudaoImg/icon01.png) #fff 30px center no-repeat;
  }

  .login .el-form-item:nth-child(2) input {
    background: url(../../assets/qudaoImg/icon02.png) #fff 30px center no-repeat;
  }

  .login-form .el-form-item__error {
    font-size: 14px;
    margin-top: 5px;
  }
</style>
